<?php if(count($branches) > 1):?>
    <table class="table table-bordered table-striped table-hover">
        <tr>
            <th>Địa chỉ chi nhánh</th> 
            <th>Số điện thoại </th>
            <th></th>
        </tr>
        <?php foreach($branches as $i => $branch):?>
            <tr>
                <td><i class="icon-home"></i> <?php echo $branch->address?>.</td> 
                <td>
                    <?php if($branch->phone):?><i class="icon-phone"></i> <?php echo $branch->phone?><?php endif?> 
                </td>
                <td>
                    <i class="icon-map-marker"></i>  
                    <a lat="<?php echo $branch->lat?>" lng="<?php echo $branch->lng?>" map="<?php echo $i?>" class="view_direction" style="cursor: pointer;">
                        Bản đồ
                    </a>
                </td>
            </tr>
            <?php endforeach?>
    </table>
    <?php endif?>

<div id="direction_block">
    <table class="table table-bordered table-striped table-hover">
        <tr>
            <td>Từ vị trí của bạn</td>
            <td>Đến <b><?php echo $this->siteName?></b></td>
            <td></td>
        </tr>
        <tr>
            <td class="dt-form"><input type="text" id="map_from"></td>
            <td class="dt-form">
                <select id="map_to" class="form-input">
                    <?php foreach($branches as $i => $branch):?>
                        <option value="<?php echo $i?>"><?php echo $branch->address?></option>
                        <?php endforeach;?>
                </select>
            </td>
            <td>
                <button id="get_direction" class="dt-btn dt-btn-s flat">

                    <span class="icon-stack">
                        <i class="icon-check-empty icon-stack-base"></i>
                        <i class="icon-hand-right"></i>
                    </span>
                    Chỉ đường</button>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <div id="map_branches" style="height: 350px;">
                    <div style="text-align: center; line-height: 220px; color: #999">Đang tải bản đồ từ google</div>
                </div>
            </td>
        </tr>
    </table>
</div>
<script type="text/javascript" src="<?php echo $this->googleMapURI?>"></script>
<script>

    $(function() {
        var siteName = '<?php echo CHtml::encode($this->siteName)?>';
        var addrs = new Array();
        var phones = new Array(); 
        var GLatLngs = new Array();
        <?php foreach($branches as $i => $branch):?>
            GLatLngs[<?php echo $i?>] = new google.maps.LatLng(<?php echo $branch->latlng?>);
            addrs[<?php echo $i?>] = '<?php echo CHtml::encode($branch->address)?>';
            phones[<?php echo $i?>] = '<?php echo $branch->phone?>';
        <?php endforeach;?>

        var latlngbounds = new google.maps.LatLngBounds();
        for ( var i = 0; i < GLatLngs.length; i++ ){
            latlngbounds.extend(GLatLngs[i]);
        }

        var map_branches;

        function init_gmap(map_id, GLatLngs, addrs, phones, siteName){
            var mapOptions = {
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: new google.maps.LatLng(<?php echo $branches[0]->latlng?>),

                scaleControl: false,
                panControl: false,
                zoomControl: true,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.SMALL,
                    position: google.maps.ControlPosition.TOP_LEFT
                },
                mapTypeControl: false,
                mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                    position: google.maps.ControlPosition.TOP_LEFT
                },
                streetViewControl: false,
                streetViewControlOptions: {
                    position: google.maps.ControlPosition.TOP_LEFT
                }

            };

            var map = new google.maps.Map(document.getElementById(map_id), mapOptions);

            var autocomplete = new google.maps.places.Autocomplete(document.getElementById('map_from'));
            autocomplete.bindTo('bounds', map);

            var infowindow = new google.maps.InfoWindow();
            var marker, i;

            for (i = 0; i < GLatLngs.length; i++) {  
                marker = new google.maps.Marker({
                    map:map,
                    position: GLatLngs[i],
                    title: addrs[i],
                    icon : new google.maps.MarkerImage('/files/img/red_flag.png',
                        new google.maps.Size(69,48),
                        new google.maps.Point(0,0),
                        new google.maps.Point(35,48)
                    ),
                    shadow: new google.maps.MarkerImage('/files/img/red_flag_shadow.png',
                        new google.maps.Size(97,48),
                        new google.maps.Point(0,0),
                        new google.maps.Point(35,48)
                    )
                });
                var phone = phones[i] ? '<br/><b>ĐT</b>: '+phones[i] : '';

                infowindow.setContent('<div style="font-size: 0.9em; color: #444"><b>'+siteName+'</b><br/>'+addrs[i]+phone+'</div>');
                infowindow.open(map,marker);
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map,marker);
                });
            }

            //map.setCenter(GLatLngs[0]);
            //                if(GLatLngs.length > 1){
            //                    map.fitBounds(latlngbounds);
            //                }else{
            //                    map.setCenter(GLatLngs[0]);
            //                }
            return map;
        }


        $('select#map_to').change(function(){
            var latlng = GLatLngs[$(this).val()];
            map_branches.setCenter(latlng);
        });

        $('.view_direction').click(function(){
            $("#direction_block").show();
            map_branches = init_gmap('map_branches', GLatLngs, addrs, phones, siteName);
            $('#map_from').focus();
            $('#map_to ').val($(this).attr('map'));

            var latlng = new google.maps.LatLng($(this).attr('lat'), $(this).attr('lng'));
            map_branches.setCenter(latlng);

            $('html, body').animate({
                scrollTop: $("#map_branches").offset().top - 60
                }, 1000);
        });

        $('#get_direction').click(function(){
            if($('#map_from').val() == ''){
                alert('Bạn cần nhập vị trí của bạn trước');
                $('#map_from').focus();
                $('html, body').animate({
                    scrollTop: $("#map_from").offset().top - 60
                    }, 1000);
                return false;
            }
            $('#direction_sidebar').show();

            var directionDisplay;
            directionsDisplay = new google.maps.DirectionsRenderer();
            directionsDisplay.setMap(map_branches);
            directionsDisplay.setPanel(document.getElementById('direction_panel'));

            var start = $('#map_from').val();
            var end = GLatLngs[$('#map_to').val()];
            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };

            var directionsService = new google.maps.DirectionsService();
            directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });

        });  

        map_branches = init_gmap('map_branches', GLatLngs, addrs, phones, siteName);
    });
</script>